<template>
  <div class="order-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title" >订单确认</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>

    <div class="order-wrap">
      <div class="cart-list">
        <ul>
          <li v-for="item in order.purchaseOrderInfo">
            <div class="address">
              <i class="icon icon-dingwei"></i>{{item.shippingAddress}}
            </div>
            <ol>
              <li class="flex border-bottom" v-for="wareItem in item.wareList">
                <img :src="wareItem.mainImage">
                <div class="cart-center flex-1">
                  <h3> <span class="zy" v-show="wareItem.supplierTypeId==1">自营</span>{{wareItem.wareName}}</h3>
                  <p class="price">￥{{wareItem.pricePiece | money}} <span>{{wareItem.numberPerBox}}袋/件</span></p>
                </div>
                <div class="cart-right">
                  <span>× {{wareItem.number}}</span>
                </div>
              </li>
            </ol>
            <div class="compute"><b class="supplieShop fl"><i class="icon icon-dianpu5"></i>{{item.supplierName}}</b>小计：<span>￥{{item.amountTotal | money}}</span></div>
          </li>
        </ul>
      </div>
      <div class="item-wrap border-bottom flex">
        <label>备注</label>
        <div class="flex-1 item-right">
          <input type="text" placeholder="选填，请输入需要备注的信息">
        </div>
      </div>
      <div class="item-wrap border-bottom flex">
        <label>发票</label>
        <div class="flex-1 item-right">
          <span class="tab" @click="invoiceFun(0)" :class="{active:fapiaoTab==0}">不开发票</span>
          <span class="tab" @click="invoiceFun(3)" :class="{active:fapiaoTab==3}">普通发票</span>
          <span class="tab" @click="invoiceFun(1)" :class="{active:fapiaoTab==1}">增值税发票</span>
        </div>
      </div>
      <div class="item-wrap border-bottom flex">
        <label>熊猫币 <i class="icon icon-wenhao red-color" @click="isPandaBi=true"></i></label>
        <div class="flex-1 item-right">
          使用{{pandaCoins.usablePandaCoinsCount}}熊猫币，抵￥{{pandaCoins.usablePandaCoinsAccount}}
        </div>
        <div class="switch-box" @click="OpenPandaBi" :class="{setShow:form.coinStatus==1}">
          <div class="switch-btn"></div>
        </div>
      </div>
    </div>

    <section class="bottom-section">
      <div class="foot-bar flex">
        <label class="flex-1">共{{order.orderCount}}个订单</label>
        <a href="###" class="balance" @click="clickPay">去结算
          <priceShow :price="amountTotal" unitName=""></priceShow>
        </a>
      </div>
    </section>
    <!--发票-->
    <invoice v-show="isFapiao" :fapiaoTab="fapiaoTab"></invoice>
    <pandaBi v-show="isPandaBi"></pandaBi>

    <xm-loading v-show="loading"></xm-loading>
  </div>
</template>
<script>
  import invoice from './invoice.vue';
  let userName = '';
  export default {
    props: {},
    data() {
      return {
        loading: true,
        isFapiao:false,
        fapiaoTab:0,
        amountTotal: 0,
        isPandaBi:false,
        order: {},
        pandaCoins:'',
        form : {
            code:'',
            orderMainId:'',
            message: '',
            coinStatus:0,//是否开启熊猫币支付1开启，0未开启
            drawABill:2  //是否开发票 1开，2不开
        }
      };
    },
    methods: {
      /**
       * 获取订单详情
       * */
      establishOrderInfo(){
        this.loading = true;
        establishOrderInfo({orderMainId: this.form.orderMainId,code: this.form.code}).then(data=>{
          if(data.returnCode == '000000'){
            this.loading = false;
            this.order = data.result;
            this.amountTotal=this.order.amountTotal;
            this.message = data.result.description;
          }
        })
      },
      /**
       * 订单可用熊猫币信息获取
       * */
      usablePandaCoins(){
          usablePandaCoins({orderMainId: this.form.orderMainId,code: this.form.code}).then(data=>{
              if(data.returnCode == '000000'){
                  this.loading = false;
                  this.pandaCoins = data.result;
              }
          })
      },
      /**
       * 发票
       *  tab 3普通  1增值发票
       * */
      invoiceFun(tab){
        this.fapiaoTab=tab;
        if(this.fapiaoTab==0){
            this.form.drawABill=2;
        }else {
            this.isFapiao=true;
            this.form.drawABill=1;
        }
      },
      OpenPandaBi(){
        this.form.coinStatus= this.form.coinStatus == 0 ? 1 : 0;
        if(this.form.coinStatus==0){
            this.amountTotal=this.order.amountTotal;
        }else {
            this.amountTotal=this.order.amountTotal-this.pandaCoins.usablePandaCoinsAccount;
        }
      },
      /**
       * 点击支付
       * @param <Object> 订单对象
       * */
      clickPay(){
        this.loading = true;
        setOrderDesc(this.form).then(data=>{
          this.loading = false;
          this.$refs.code.value = this.order.code;
//          this.$refs.form.submit();
//          this.weixinAttorney();
//          this.$router.push({name: 'orderPay', params: {orderCode: this.order.code, money: this.order.mainAmountTotal || 0 }});
        });
      },
    },
    filters: {
      orderStatus(type){
        if(type==1){
          return '未支付';
        }else if(type==2){
          return '已支付';
        }else if(type==3){
          return '已取消';
        }else if(type==4){
          return '已完成';
        }else{
          return '';
        }
      },
      filterName(name){
        if(name!=userName){
          return name;
        }
        return '自己';
      },
      invoiceTypeName(type){
        if(type==1){
          return '增值税发票(纸质)';
        }else if(type == 2){
          return '个人';
        }else if(type ==3){
          return '普通发票(纸质)';
        }
        return '';
      }

    },
    created() {
        var _this=this;
      userName = Cookie.get('userName');
      //orderSource//订单来源0，代表联合支付，1代表订单列表那去支付
      var orderSource= this.$route.params.orderSource;
      var orderCode = this.$route.params['orderCode'];
      if(orderSource==0){
          _this.form.orderMainId=orderCode;
          _this.form.code='';
      }else {
          _this.form.orderMainId='';
          _this.form.code=orderCode;
      }

      //订单详情
      this.establishOrderInfo();
      //熊猫币
      this.usablePandaCoins();
    },
    mounted(){

    },
    components: {
        invoice
    }
  };
</script>
<style lang="less" scoped>
  @import "./order.less";
  .order-wrap{
    .cart-list{
      ul li{
          .address{
            font-size: .24rem;
            color: #333333;
            i{
              color: #999;
            }
          }
        ol li{
          .cart-right{
            span{
              vertical-align: middle;
            }
          }
        }
        .compute{
          b{
            font-weight: normal;
            color: #666;
            i{
              margin-right: .16rem;
            }
          }
        }
      }
    }
    .item-wrap{
      height: .88rem;
      line-height: .88rem;
      padding:0 .32rem;
      background: #fff;
      font-size: .24rem;
      label{
        display: inline-block;
        width: 1.32rem;
        color: #999999;
      }
      .item-right{
        color: #333333;;
        input{
          border: none;
          height: .88rem;
          line-height: .88rem;
        }
        span.tab{
          display: inline-block;
          width: 1.63rem;
          height: .64rem;
          line-height: .64rem;
          margin-right: .16rem;
          text-align: center;
          background: #E8EDF2;
          border-radius: 6px;
          color: #666;
          &.active{
            background: #FFFFFF;
            border: 2px solid #FF4A4A;
            border-radius: 6px;
            color: #FF4A4A;
          }
          &:last-child{
            margin-right: 0;
          }
        }
      }

    }

  }
  .bottom-section{
    .foot-bar{
      padding-left: .45rem;
      a{
        width: 3.6rem;
        color: #fff;
      }
    }
  }
</style>

